<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动一：转一转，接回尾巴</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
            margin: 0;
            padding: 20px;
            color: #333;
            overflow-y: auto;
        }
        
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 30px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .main-content {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 20px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .polygon-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
        }
        
        .polygon-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
            height: 600px;
            justify-content: center;
        }
        
        /* 成功提示消息样式 */
        .success-message {
            position: absolute;
            top: 10px;
            right: 10px;
            text-align: center;
            display: none;
            z-index: 10;
        }
        
        .success-text {
            font-size: 36px;
            font-weight: bold;
            color: #ffd700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            margin-bottom: 10px;
            animation: pulse 1s infinite alternate;
        }

.record-table-container {
    position: absolute;
    top: 110px;
    left: 520px;
    z-index: 10;
    width: 240px;
    height: 320px;
}

#successRecordTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}

#successRecordTable th {
    background-color: #f2f2f2;
    border: 2px solid #ddd;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

#successRecordTable td {
    border: 2px solid #ddd;
    padding: 10px;
    text-align: center;
    background-color: white;
}
        
        /* 碎花彩带效果 */
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            opacity: 0;
            animation: confetti-fall 3s ease-in-out forwards;
        }
        
        @keyframes confetti-fall {
            0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(600px) rotate(360deg); opacity: 0; }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.1); }
        }
        
        /* 星星样式 */
        .star {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: #ffd700;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            animation: twinkle 1.5s ease-in-out infinite;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
            50% { opacity: 0.5; transform: scale(1.2) rotate(10deg); }
        }
        
        .rotation-counter {
            position: absolute;
            top: 10px;
            left: 10px;
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 10px 20px;
            border-radius: 12px;
            font-size: 24px;
            font-weight: bold;
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .rotation-counter span {
            font-size: 40px;
            color: white;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        .svg-container {
            width: 750px;
            height: 550px;
        }
        
        .hexagon {
            fill: rgba(52, 152, 219, 0.2);
            stroke: #2980b9;
            stroke-width: 3;
        }
        
        .square {
            fill: rgba(231, 76, 60, 0.2);
            stroke: #c0392b;
            stroke-width: 3;
        }
        
        .vertex-label {
            font-size: 14px;
            font-weight: bold;
            fill: #333;
            pointer-events: none;
        }
        
        .side-controls {
            display: flex;
            flex-direction: column;
            width: 380px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            flex-shrink: 0;
            height: 600px;
        }
        
        .info-panel {
            padding: 20px 30px;
            font-size: 24px;
            line-height: 1.6;
            border-bottom: 2px solid #f0f0f0;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        }
        
        .slider-section {
            margin-bottom: 20px;
        }
        
        .slider-title {
            font-size: 28px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .slider-container {
            margin: 15px 0 25px;
        }
        
        .slider-control {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .slider-value {
            background-color: #2980b9;
            color: white;
            border-radius: 25px;
            padding: 10px 20px;
            font-size: 32px;
            font-weight: bold;
            min-width: 60px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }
        
        input[type="range"] {
            width: 100%;
            height: 12px;
            -webkit-appearance: none;
            appearance: none;
            background: linear-gradient(to right, #3498db, #2980b9);
            outline: none;
            opacity: 1;
            transition: opacity 0.2s;
            border-radius: 6px;
            margin: 25px 0;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 28px;
            height: 28px;
            background: white;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
            border: 3px solid #2980b9;
            transition: all 0.2s ease;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        input[type="range"]::-moz-range-thumb {
            width: 28px;
            height: 28px;
            background: white;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
            border: 3px solid #2980b9;
        }
        
        /* 跟随滑点的数字显示 */
        .slider-container {
            position: relative;
        }
        
        .slider-value {
            position: absolute;
            top: -20px;
            transform: translateX(-50%);
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            background: transparent;
            padding: 0;
            min-width: auto;
            box-shadow: none;
        }
        
        .progress-bar {
            width: 100%;
            height: 8px;
            background: #ecf0f1;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 15px;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #3498db, #2980b9);
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        
        .button-panel {
            display: flex;
            flex-direction: column;
            padding: 20px 30px;
            gap: 15px;
        }
        
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            min-height: 45px;
        }

        .btn svg {
            margin-right: 10px;
            width: 22px;
            height: 22px;
        }
        
        .btn.rotate {
            background: linear-gradient(135deg, #4caf50, #388e3c);
            color: white;
        }
        
        .btn.rotate:hover {
            background: linear-gradient(135deg, #45a049, #388e3c);
            box-shadow: 0 8px 30px rgba(76, 175, 80, 0.4);
            transform: translateY(-3px);
        }
        
        .btn.reset {
            background: linear-gradient(135deg, #ff9800, #f57c00);
            color: white;
        }
        
        .btn.reset:hover {
            background: linear-gradient(135deg, #fb8c00, #ef6c00);
            box-shadow: 0 8px 30px rgba(255, 152, 0, 0.4);
            transform: translateY(-3px);
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .main-content {
                flex-direction: column;
                align-items: center;
            }
            
            .svg-container {
                width: 600px;
                height: 450px;
            }
        }
        
        @media (max-width: 768px) {
            .svg-container {
                width: 480px;
                height: 360px;
            }
            
            .side-controls {
                width: 100%;
                max-width: 400px;
            }
            
            h1 {
                font-size: 2.5em;
            }
        }
    </style>
</head>
<body>
        <div class="container">
            <div class="main-content">
                <div class="polygon-wrapper">
                    <!-- 旋转次数计数器 -->
                    <div class="rotation-counter">
                        旋转次数：<span id="rotationDisplay">0</span>
                    </div>
                    
                    <div class="polygon-container">
                            <!-- 成功提示消息 -->
                            <div id="successMessage" class="success-message">
                                <div class="success-text">成功接回！</div>
                            </div>
                            
                            <!-- 音频元素 -->
                            <audio id="rotateSound" src="yinxiao1.mp3" preload="auto"></audio>
                            <audio id="successSound" src="chengong.mp3" preload="auto"></audio>
                        <!-- 正六边形：蓝色边框 -->
                        <div class="svg-container">
                              <svg width="750" height="550" viewBox="0 0 700 500">
                                <!-- 正六边形：蓝色边框 -->
                            <polygon class="hexagon" points="250,172 340,226 340,334 250,388 160,334 160,226"/>
                            <!-- 拼接的正方形：ab边与正六边形的BC边完全重合，放大1.8倍 -->
                            <polygon class="square" points="340,334 340,226 448,226 448,334"/>
                            <!-- 左侧六边形中的图片 -->
                            <image x="172" y="168" width="200" height="212" href="chick1.png" preserveAspectRatio="xMidYMid slice"/>
                            <!-- 右侧正方形中的图片 -->
                            <image x="305" y="240" width="115" height="90" href="chick2.png" preserveAspectRatio="xMidYMid slice"/>
                            <!-- 正六边形顶点标签 - 调整位置避免重叠 -->
                            <text class="vertex-label" x="250" y="165" text-anchor="middle" dy="-2">A</text>
                            <text class="vertex-label" x="345" y="226" text-anchor="start" dy="0">B</text>
                            <text class="vertex-label" x="345" y="334" text-anchor="start" dy="0">C</text>
                            <text class="vertex-label" x="250" y="395" text-anchor="middle" dy="5">D</text>
                            <text class="vertex-label" x="155" y="334" text-anchor="end" dy="0">E</text>
                            <text class="vertex-label" x="155" y="226" text-anchor="end" dy="0">F</text>
                            <!-- 正方形顶点标签 - 调整位置避免重叠，使用小写字母 -->
                            <text class="vertex-label" x="340" y="338" text-anchor="middle" dy="5">a</text>
                            <text class="vertex-label" x="340" y="222" text-anchor="middle" dy="-2">b</text>
                            <text class="vertex-label" x="448" y="222" text-anchor="middle" dy="-2">c</text>
                            <text class="vertex-label" x="448" y="338" text-anchor="middle" dy="5">d</text>
                            <!-- 移除红框 -->
                            </svg>
                          </div>
                          <!-- 接回记录表 -->
                          <div class="record-table-container">
                            <table id="successRecordTable">
                              <thead>
                                <tr>
                                  <th>接回次数</th>
                                  <th>旋转次数</th>
                                </tr>
                              </thead>
                              <tbody>
                                <!-- 记录将通过JavaScript动态添加 -->
                              </tbody>
                            </table>
                          </div>
                    </div>
                </div>
                
                <!-- 侧边控制面板：信息面板和按钮垂直排列 -->
                <div class="side-controls">
                    <!-- 信息面板 -->
                    <div class="info-panel">
                          <!-- 身体边数控制 -->
                          <div class="slider-section">
                              <div class="slider-title">身体边数</div>
                              <div class="slider-container">
                                  <span class="slider-value" id="bodyValue">6</span>
                                  <input type="range" id="bodySidesSlider" min="4" max="10" value="6" class="slider">
                              </div>
                          </div>
                          
                          <!-- 尾巴边数控制 -->
                          <div class="slider-section">
                              <div class="slider-title">尾巴边数</div>
                              <div class="slider-container">
                                  <span class="slider-value" id="tailValue">4</span>
                                  <input type="range" id="tailSidesSlider" min="3" max="8" value="4" class="slider">
                              </div>
                          </div>
                      </div>
                    
                    <!-- 按钮面板 -->
                    <div class="button-panel">
                        <button id="rotateBtn" class="btn rotate">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
                                <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/>
                            </svg>
                            旋转
                        </button>
                        <button id="resetBtn" class="btn reset">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
                                <path d="M17,1H7A2,2 0 0,0 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3A2,2 0 0,0 17,1M17,19H7V5H17V19M12,8L10.59,9.41L13.17,12L10.59,14.41L12,16L16,12L12,8Z"/>
                            </svg>
                            重置
                        </button>
                    </div>
                </div>
            </div>
    </div>
    
    <script>
        // 计算并验证多边形的边长
        function calculateDistance(x1, y1, x2, y2) {
            return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
        }
        
        // 正六边形的顶点坐标 - 与SVG中相同的放大1.8倍后的坐标，整体向左移动50px
        const hexPoints = [
            {x: 250, y: 172},  // A
            {x: 340, y: 226},  // B
            {x: 340, y: 334},  // C
            {x: 250, y: 388},  // D
            {x: 160, y: 334},   // E
            {x: 160, y: 226}    // F
        ];
        
        // 原始正方形顶点坐标 - 用于重置（放大1.8倍后的坐标），整体向左移动50px
        const originalSquarePoints = [
            {x: 340, y: 334},  // a - 与正六边形的C点重合
            {x: 340, y: 226},  // b - 与正六边形的B点重合
            {x: 448, y: 226},  // c
            {x: 448, y: 334}   // d
        ];
        
        // 当前正方形顶点坐标
        let squarePoints = JSON.parse(JSON.stringify(originalSquarePoints));
        
        // 计算正六边形的所有边长
        console.log("正六边形边长验证:");
        let hexSideLength = 0;
        for (let i = 0; i < 6; i++) {
            const j = (i + 1) % 6;
            const length = calculateDistance(hexPoints[i].x, hexPoints[i].y, hexPoints[j].x, hexPoints[j].y);
            console.log(`边${String.fromCharCode(65+i)}${String.fromCharCode(65+j)}:`, length.toFixed(2));
            if (i === 0) hexSideLength = length; // 记录第一条边的长度
        }
        
        // 计算正方形的边长
        const squareSideLength = calculateDistance(squarePoints[0].x, squarePoints[0].y, squarePoints[1].x, squarePoints[1].y);
        console.log("\n正方形边长:", squareSideLength.toFixed(2));
        
        // 根据算法计算旋转角度
        const hexagonSides = 6;
        const squareSides = 4;
        const hexagonAngle = (hexagonSides - 2) * 180 / hexagonSides; // 120度
        const squareAngle = (squareSides - 2) * 180 / squareSides; // 90度
        const rotationAngle = 360 - hexagonAngle - squareAngle; // 150度
        
        console.log(`\n旋转算法: 正六边形内角=${hexagonAngle}°, 正方形内角=${squareAngle}°, 旋转角度=${rotationAngle}°`);
        
        // 旋转函数 - 以点b为中心逆时针旋转指定角度（弧度）
        function rotatePoint(point, center, angleRad) {
            const dx = point.x - center.x;
            const dy = point.y - center.y;
            const cos = Math.cos(angleRad);
            const sin = Math.sin(angleRad);
            
            return {
                x: center.x + dx * cos - dy * sin,
                y: center.y + dx * sin + dy * cos
            };
        }
        
        // 更新SVG中正方形的显示和绑定的chick2图片
        function updateSquareInSVG() {
            const squareElement = document.querySelector('.square');
            const pointsStr = squarePoints.map(p => `${p.x},${p.y}`).join(' ');
            squareElement.setAttribute('points', pointsStr);
            
            // 更新顶点标签位置，添加偏移以避免与线条重叠
            const labels = ['a', 'b', 'c', 'd'];
            const offsets = [
                {dx: 0, dy: 8},  // a点 - 下方
                {dx: 0, dy: -4}, // b点 - 上方
                {dx: 0, dy: -4}, // c点 - 上方
                {dx: 0, dy: 8}   // d点 - 下方
            ];
            
            labels.forEach((label, index) => {
                const textElement = document.querySelector(`text.vertex-label:nth-of-type(${index + 7})`);
                if (textElement) {
                    textElement.setAttribute('x', squarePoints[index].x);
                    textElement.setAttribute('y', squarePoints[index].y + offsets[index].dy);
                    // 保持文本锚点居中
                    textElement.setAttribute('text-anchor', 'middle');
                }
            });
            
            // 更新与正方形绑定的chick2图片
            updateChick2Image();
        }
        
        // 更新chick2图片位置和旋转
        function updateChick2Image() {
            const chick2Image = document.querySelector('image[href="chick2.png"]');
            if (!chick2Image) return;
            
            // 关键改进：确保始终使用正确的a和b点
            // 由于原始代码中a点和b点固定为索引0和1，我们需要确保这个关系在旋转后仍然成立
            // 通过标签文本而不是索引来确定a和b点
            const aPointLabel = document.querySelector('text.vertex-label:nth-of-type(7)');
            const bPointLabel = document.querySelector('text.vertex-label:nth-of-type(8)');
            
            let pointA, pointB;
            
            if (aPointLabel && bPointLabel) {
                // 获取标签对应的实际点坐标
                pointA = {
                    x: parseFloat(aPointLabel.getAttribute('x')),
                    y: parseFloat(aPointLabel.getAttribute('y')) - 8 // 减去之前设置的偏移量
                };
                
                pointB = {
                    x: parseFloat(bPointLabel.getAttribute('x')),
                    y: parseFloat(bPointLabel.getAttribute('y')) + 4 // 减去之前设置的偏移量
                };
            } else {
                // 回退到使用索引位置
                pointA = squarePoints[0]; // a点
                pointB = squarePoints[1]; // b点
            }
            
            // 计算ab边的向量
            const abVector = {x: pointB.x - pointA.x, y: pointB.y - pointA.y};
            
            // 计算ab边的长度
            const abLength = Math.sqrt(abVector.x * abVector.x + abVector.y * abVector.y);
            
            // 计算旋转角度（与ab边的角度一致）
            const angleRad = Math.atan2(abVector.y, abVector.x);
            const angleDeg = angleRad * 180 / Math.PI;
            
            // 设置图片尺寸 - 根据需求的精确比例
            const imgWidth = abLength * 0.75;
            const imgHeight = imgWidth * 0.85;
            
            // 设置图片的基础位置
            chick2Image.setAttribute('x', 0);
            chick2Image.setAttribute('y', 0);
            chick2Image.setAttribute('width', imgWidth);
            chick2Image.setAttribute('height', imgHeight);
            
            // 让chick2图片完全贴合到ab边上
            // 添加更大的负偏移，使图片完全贴紧ab边
            const edgeOffset = -15; // 进一步增大负偏移使图片与ab边完全绑定
            
            chick2Image.setAttribute('transform', 
                `translate(${pointA.x + edgeOffset}, ${pointA.y}) ` +  // 应用负偏移让图片更靠近ab边
                `rotate(${angleDeg})`);  // 旋转到与ab边一致的角度
        }
        // 跟踪当前旋转中心点索引
        let currentRotationCenterIndex = 1; // 默认从点b开始
        
        // 检查两点是否足够接近（处理浮点精度问题）
        function arePointsEqual(p1, p2, tolerance = 0.01) {
            const dx = p1.x - p2.x;
            const dy = p1.y - p2.y;
            return Math.sqrt(dx*dx + dy*dy) <= tolerance;
        }
        
        // 检查ab边是否与BC边重合
        function checkSidesAlignment() {
            // 正方形的ab边
            const pointA = squarePoints[0]; // a点
            const pointB = squarePoints[1]; // b点
            
            // 正六边形的BC边
            const hexPointB = hexPoints[1]; // B点
            const hexPointC = hexPoints[2]; // C点
            
            // 检查a是否与C重合，b是否与B重合
            const isAAligned = arePointsEqual(pointA, hexPointC, 5);
            const isBAligned = arePointsEqual(pointB, hexPointB, 5);
            
            // 如果ab边与BC边完全重合
            if (isAAligned && isBAligned) {
                console.log("ab边与BC边完全重合，成功接回！");
                showSuccessMessage();
            }
        }
        
        // 显示成功消息和庆祝动画
        function showSuccessMessage() {
            const successMessage = document.getElementById('successMessage');
            const polygonContainer = document.querySelector('.polygon-container');
            const successSound = document.getElementById('successSound');
            
            // 播放成功音效
            successSound.currentTime = 0;
            successSound.play();
            
            // 显示成功消息
            successMessage.style.display = 'block';
            
            // 创建碎花彩带效果
            createConfetti(polygonContainer);
            
            // 记录接回次数和旋转次数
            successCount++;
            addRecordToTable(successCount, rotationCounter);
            
            // 3秒后隐藏消息
            setTimeout(() => {
                successMessage.style.display = 'none';
            }, 3000);
        }
        
        function addRecordToTable(successNum, rotateNum) {
            const tableBody = document.querySelector('#successRecordTable tbody');
            const row = document.createElement('tr');
            
            // 创建接回次数单元格
            const countCell = document.createElement('td');
            countCell.textContent = `第${successNum}次`;
            row.appendChild(countCell);
            
            // 创建旋转次数单元格
            const rotateCell = document.createElement('td');
            rotateCell.textContent = `转${rotateNum}下`;
            row.appendChild(rotateCell);
            
            // 添加新行到表格顶部
            tableBody.appendChild(row);
            
            // 保持表格最多显示6行
            if (tableBody.children.length > maxRecords) {
                tableBody.removeChild(tableBody.lastChild);
            }
        }
        
        // 创建碎花彩带效果
        function createConfetti(container) {
            // 颜色数组
            const colors = ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#4b0082', '#9400d3'];
            
            // 创建50个碎花
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                
                // 随机颜色
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                
                // 随机位置（水平方向）
                confetti.style.left = `${Math.random() * container.offsetWidth}px`;
                
                // 随机动画延迟
                confetti.style.animationDelay = `${Math.random() * 0.5}s`;
                
                // 随机动画持续时间
                confetti.style.animationDuration = `${2 + Math.random() * 2}s`;
                
                // 添加到容器
                container.appendChild(confetti);
                
                // 动画结束后移除
                setTimeout(() => {
                    confetti.remove();
                }, 3000);
            }
        }
        
        // 动画旋转函数
        function animateRotation() {
            // 播放旋转音效
            const rotateSound = document.getElementById('rotateSound');
            rotateSound.currentTime = 0;
            rotateSound.play();
            
            const rotateBtn = document.getElementById('rotateBtn');
            rotateBtn.disabled = true;
            rotateBtn.textContent = '旋转中...';
            
            const center = squarePoints[currentRotationCenterIndex]; // 使用当前旋转中心点
            const targetAngle = -rotationAngle * Math.PI / 180; // 转换为弧度，负号实现顺时针旋转
            const duration = 500; // 动画持续时间（毫秒）
            const startTime = Date.now();
            
            // 保存初始点位置用于动画插值
            const startPoints = JSON.parse(JSON.stringify(squarePoints));
            
            function animate() {
                const elapsed = Date.now() - startTime;
                const progress = Math.min(elapsed / duration, 1);
                
                // 使用缓动函数使动画更自然
                const easeProgress = 1 - Math.pow(1 - progress, 3);
                const currentAngle = targetAngle * easeProgress;
                
                // 对每个点进行旋转
                for (let i = 0; i < squarePoints.length; i++) {
                    if (i !== currentRotationCenterIndex) { // 跳过旋转中心
                        squarePoints[i] = rotatePoint(startPoints[i], center, currentAngle);
                    }
                }
                
                // 更新显示
                updateSquareInSVG();
                
                if (progress < 1) {
                    requestAnimationFrame(animate);
                } else {
                    // 旋转完成后，按用户要求更新旋转中心点索引
                // 顺序为：b → c → d → a → b...
                currentRotationCenterIndex = (currentRotationCenterIndex + 1) % squarePoints.length;
                
                // 检查是否有正方形的点应该与六边形的点重合，并进行微调（解决精度问题）
                for (let i = 0; i < squarePoints.length; i++) {
                    for (let j = 0; j < hexPoints.length; j++) {
                        if (arePointsEqual(squarePoints[i], hexPoints[j], 5)) {
                            // 如果点足够接近，精确对齐
                            squarePoints[i] = {x: hexPoints[j].x, y: hexPoints[j].y};
                            console.log(`对齐点: 正方形点${i}(${String.fromCharCode(97+i)}) 与 六边形点${j}(${String.fromCharCode(65+j)})`);
                        }
                    }
                }
                
                // 强制更新显示以确保对齐
                updateSquareInSVG();
                
                // 检查ab边是否与BC边完全重合
                checkSidesAlignment();
                
                // 关键修改：每次旋转完成后更新chick2的位置和旋转，使其与正方形作为整体一起旋转
                updateChick2Image();
                    
                rotateBtn.disabled = false;
                rotateBtn.textContent = '旋转';
                }
            }
            
            requestAnimationFrame(animate);
        }
        
        // 重置函数
        function resetSquare() {
            squarePoints = JSON.parse(JSON.stringify(originalSquarePoints));
            updateSquareInSVG();
            const rotateBtn = document.getElementById('rotateBtn');
            rotateBtn.disabled = false;
            rotateBtn.textContent = '旋转';
            
            // 重置旋转中心点索引
            currentRotationCenterIndex = 1; // 重置为点b
            
            // 重置成功次数
            successCount = 0;
            
            // 清空记录表格
            const tableBody = document.querySelector('#successRecordTable tbody');
            if (tableBody) tableBody.innerHTML = '';
        }
        
        // 初始化变量
        let rotationCounter = 0;
        let successCount = 0;
        const maxRecords = 6;
        
        // 更新旋转次数显示
        function updateRotationCount() {
            document.getElementById('rotationDisplay').textContent = rotationCounter;
        }
        
        // 更新进度条
        function updateProgressBar(elementId, value, min, max) {
            const percentage = ((value - min) / (max - min)) * 100;
            document.getElementById(elementId).style.width = `${percentage}%`;
        }
        
        // 添加事件监听器
        document.addEventListener('DOMContentLoaded', () => {
            // 初始化显示
            updateRotationCount();
            
            // 关键修改：初始化时就设置chick2的位置和旋转
            updateChick2Image();
            
            // 边数控制变量
            const bodyMin = 4, bodyMax = 10;
            const tailMin = 3, tailMax = 8;
            
            // 更新滑块值的位置
            function updateSliderValuePosition(slider, valueElement) {
                const position = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
                const left = position + '%';
                valueElement.style.left = left;
            }
            
            // 身体边数滑动条
            const bodySidesSlider = document.getElementById('bodySidesSlider');
            const bodyValue = document.getElementById('bodyValue');
            
            bodySidesSlider.addEventListener('input', () => {
                const value = parseInt(bodySidesSlider.value);
                bodyValue.textContent = value;
                updateSliderValuePosition(bodySidesSlider, bodyValue);
            });
            
            // 尾巴边数滑动条
            const tailSidesSlider = document.getElementById('tailSidesSlider');
            const tailValue = document.getElementById('tailValue');
            
            tailSidesSlider.addEventListener('input', () => {
                const value = parseInt(tailSidesSlider.value);
                tailValue.textContent = value;
                updateSliderValuePosition(tailSidesSlider, tailValue);
            });
            
            // 初始化滑块值的位置
            updateSliderValuePosition(bodySidesSlider, bodyValue);
            updateSliderValuePosition(tailSidesSlider, tailValue);
            
            // 旋转按钮
            document.getElementById('rotateBtn').addEventListener('click', () => {
                animateRotation();
                // 增加旋转次数计数
                rotationCounter++;
                updateRotationCount();
            });
            
            // 重置按钮
            document.getElementById('resetBtn').addEventListener('click', () => {
                resetSquare();
                // 关键修改：重置后重新设置chick2的位置和旋转
                updateChick2Image();
                rotationCounter = 0;
                updateRotationCount();
                
                // 重置滑动条
                bodySidesSlider.value = 6;
                bodyValue.textContent = '6';
                updateSliderValuePosition(bodySidesSlider, bodyValue);
                
                tailSidesSlider.value = 4;
                tailValue.textContent = '4';
                updateSliderValuePosition(tailSidesSlider, tailValue);
                
                // 隐藏成功消息
                document.getElementById('successMessage').style.display = 'none';
            });
        });
    </script>
</body>
</html>